<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            position: fixed;
            padding: 5px;
            width: 320px;
            height: 400px;
            right: 5px;
            bottom: 5px;
            background-color: gainsboro;
            display: none;
        }

        .wrap .ad {
            display: flex;
            justify-content: space-between;
        }

        #dateBox {
            display: flex;
        }

        .content {
            padding-top: 20px;
        }

        .content p {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="wrap" id="adBox">
        <div class="ad">
            <div class="title">距离广告关闭还有<span id="count">10</span>秒</div>
            <div class="close">X</div>
        </div>
        <div class="content">
            <!-- 静态页面 -->
            <p id="dateBox">
                <img src="images/2.png" alt="">
                <img src="images/0.png" alt="">
                <img src="images/1.png" alt="">
                <img src="images/9.png" alt="">
                <img src="images/year.png" alt="">
                <img src="images/0.png" alt="">
                <img src="images/5.png" alt="">
                <img src="images/month.png" alt="">
                <img src="images/1.png" alt="">
                <img src="images/3.png" alt="">
                <img src="images/seven.png" alt="">
            </p>
            <p id="weekBox">
                <img src="images/week.png" alt="">
                <img src="images/one.png" alt="">
            </p>
            <p id="timeBox">
                <img src="images/1.png" alt="">
                <img src="images/6.png" alt="">
                <img src="images/sign.png" alt="">
                <img src="images/4.png" alt="">
                <img src="images/2.png" alt="">
                <img src="images/sign.png" alt="">
                <img src="images/3.png" alt="">
                <img src="images/5.png" alt="">
            </p>
        </div>
    </div>
</body>
<script>
    // 0. 页面打开5后小广告出来
    // 1. 倒计时10秒后关闭，关闭后5s自动打开    （10秒倒计时）
    // 2. 点击 X  直接关闭   ，关闭后5s自动打开 （10秒倒计时）

    var countSpan = document.getElementById("count");
    var adBox = document.getElementById("adBox");
    var closeSpan = document.getElementsByClassName("close")[0];// 只有一个元素的时候记得加下标0
    var dateBox = document.getElementById("dateBox");
    var weekBox = document.getElementById("weekBox");
    var timeBox = document.getElementById("timeBox");
    var timer = null;

    closeSpan.onclick = function () {
        adBox.style.display = "none";
        clearInterval(timer);
        setTimeout(adShow, 5000);
    }

    setTimeout(adShow, 5000);
    // 1. 小广告的倒计时
    // adShow();
    function adShow() {
        adBox.style.display = "block";
        var num = 10;
        countSpan.innerText = num; //页面再次打开的时候 把num改为10
        timer = setInterval(function () {
            num--;
            // console.log(num);
            countSpan.innerText = num;
            if (num <= 0) {
                adBox.style.display = "none";
                clearInterval(timer);
                setTimeout(function () {
                    adShow()
                }, 4000)
            }
        }, 1000);
    }


    fn()
    function fn() {

        var date = new Date();

        var year = date.getFullYear();
        var month = date.getMonth();
        month = concatZero(month);
        var day = date.getDate();
        day = concatZero(day);

        var week = date.getDay();

        var hours = date.getHours();
        hours = concatZero(hours);
        var minutes = date.getMinutes();
        minutes = concatZero(minutes);
        var seconds = date.getSeconds();
        seconds = concatZero(seconds);

        // var weekList = ["日", "一", "二", "三", "四", "五", "六"]
        var weekList = ["seven", "one", "two", "three", "four", "five", "six"];

        // dateBox.innerHTML = year + "年" + month + "月" + day + "日";
        // weekBox.innerHTML = "星期" + weekList[week];
        // timeBox.innerHTML = hours + ":" + minutes + ":" + seconds;

        dateBox.innerHTML = concatImg(year) + "<img src='images/year.png' alt=''>" + concatImg(month) + "<img src='images/month.png' alt=''>" + concatImg(day) + "<img src='images/seven.png' alt=''>";
        weekBox.innerHTML = "<img src='images/week.png' alt=''>" + "<img src='images/" + weekList[week] + ".png' alt=''>";
        timeBox.innerHTML = concatImg(hours) + "<img src='images/sign.png' alt=''>" + concatImg(minutes) + "<img src='images/sign.png' alt=''>" + concatImg(seconds);
    }

    setInterval(fn, 1000);


    function concatZero(num) {
        return num < 10 ? "0" + num : "" + num;
    }

    function concatImg(num) {
        var numStr = String(num);
        var str = "";
        for (var char of numStr) { //"2019"   2 0 1
            str += '<img src="images/' + char + '.png" alt="">'
        }
        return str;
    }
</script>

</html>